<template>
  <el-dialog
    title="作业明细"
    top="20px"
    @close="closeModal"
    :visible="show"
    width="80%">
    <el-table
      :data="data"
      height="400px"
      border
      class="margin-top-5"
      style="width: 100%"
      size="mini"
      highlight-current-row
      :header-cell-style="headerCellStyle"
      oncontextmenu="return false;"
      ref="modalTable"
      sortable="custom"
      empty-text="暂无数据"
      v-loading="dataLoading"
      show-summary
      :summary-method="getSummaries">
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="55">
      </el-table-column>
      <el-table-column
        v-for="(item, key) in workDetailColumns" :key="key"
        :prop="item.key"
        :label="item.title"
        :width="item.width"
        align="center"
        :formatter="item.formatter"
        :sortable="item.sortable"
        :show-overflow-tooltip="true"
        :fixed="item.key=='userName'"
      >
        <template slot-scope="scope">
          <template v-if="item.type === 'tasktp'">
            {{ handlePlanType(scope.row.tasktp) }}
          </template>
          <template v-else-if="item.type !== 'template'">
            {{ $table.tableRowFormat(scope.row, item) }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <template slot="footer">
      <el-button size="small" @click="closeModal">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {useCustomer, useHeaderCellStyle, useHttp, useWorkType} from "@/view/wms/js";
import {workDetailColumns} from "@/view/wms/js/column";

export default {
  name: "WorkDetailModal",
  computed: {
    headerCellStyle() {
      return useHeaderCellStyle();
    }
  },
  data() {
    return {
      data: [],
      dataLoading: false,
      show: false,
      workDetailColumns
    }
  },
  methods: {
    handlePlanType(type) {
      return useWorkType(type);
    },
    open(data) {
      this.show = true;
      this.init(data);
    },
    closeModal() {
      this.show = false;
    },
    init({tasktp, in_plan_order_num}) {
      this.dataLoading = true;
      useHttp('/wisdomwmswebapi/parktask/FindInWarehouseTaskDetail', {
        tasktp,
        plan_order_num: in_plan_order_num
      }).then(res => {
        const {message, data} = res.data;
        if (message === 'success') {
          this.data = data;
        } else {
          this.$message.warning('接口请求失败！');
        }
      }).finally(() => {
        this.dataLoading = false;
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if ([1, 6].includes(index)) {
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          let unit = '件';
          if ([4, 5].includes(index)) {
            unit = 'KG';
          }
          if (index === 7) {
            unit = '托';
          }
          sums[index] += ` ${unit}`;
        }
      });
      this.$nextTick(() => {
        this.$refs.modalTable.doLayout();
      })
      return sums;
    }
  }
}
</script>

<style scoped lang="less">

</style>
